iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

react.js 的學習筆記 (沒在用硬要學系列 第 23

day 23 嘗試用目前學到的寫一個useHover

  • 分享至 

  • xImage
  •  

useHover 也就是滑鼠移入移出事件

直接寫範例

import React, { useRef, useState, useEffect } from 'react';

export default function App() {

  const [hover, isHover] = useHover();

  return (
    <div ref={hover}>
      {isHover ? 'yes' : 'NO'}
    </div>
  )
}


// Hook
const useHover = () => {
  const [value, setValue] = useState(false);

  const ref = useRef(null);

  const handleMouseOver = () => setValue(true);
  const handleMouseOut = () => setValue(false);

  useEffect(() => {
      const node = ref.current;
      if (node) {
        node.addEventListener('mouseover', handleMouseOver);
        node.addEventListener('mouseout', handleMouseOut);
      }
    });

  return [ref, value];
}

輸出畫面
https://ithelp.ithome.com.tw/upload/images/20200923/20110292xmezZe40o5.png

useRef 在hook裡面會很常出現,因為hook寫出來就像是套件工具一樣,一個hook多個組件一起用,這也是hook最方便的地方,而且hook其實也不用自己寫,很多套件可以使用,等真的摸透了再來開發hook才是真正學會React


上一篇
day 22 useRef 使用
下一篇
day 24 memo的應用
系列文
react.js 的學習筆記 (沒在用硬要學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言